<template>
	<view class="container">
		<steps 
			typeCode="BuKa" 
			:brief="brief" 
			:notEmpty="checkBukaFiled"
			@confirm="confirm"
			:disabled="disabled"
			:insflowid="insflowid"
			:checkResult="checkResult">
			<view class="container__list">
				<view class="container__list--text">
					<text class="container__list--text-symbol">*</text>
					<text class="container__list--text-des">补卡时间</text>
				</view>
				<view class="container__list--time">
					<view class="container__list--time-text" @click="show">
						<text v-if="!datetime">请选择时间</text>
						<text v-else>{{datetime}}</text>
					</view>
				</view>
			</view>
			<view class="container__list">
				<view class="container__list--text">
					<text class="container__list--text-symbol">*</text>
					<text class="container__list--text-des">补卡理由</text>
				</view>
				<view class="container__list--textarea">
					<u--input
					    placeholder="请输入"
					    border="none"
					    v-model="content"
					  ></u--input>
				</view>
			</view>
		</steps>
		<datetime-picker 
			ref="datePicker" 
			type="datetime" 
			:border="false" 
			returnType="date" 
			v-model="time" 
			hide-second 
			@change="confirmDateTime" />
	</view>
</template>

<script>
	import Steps from '@/pages/home/child/add-attend-apply/components/steps.vue'
	import _custom from '@/common/_custom.js'
	import _data from '@/common/_data.js'
	import moment from 'moment'
	import DatetimePicker from '@/components/custom/datetime-picker/uni-datetime-picker.vue'
	
	export default {
		components: {
			Steps,
			DatetimePicker
		},
		data() {
			return {
				obsusername: _data.localData('name'),
				time: '',
				datetime: '',
				content: '',
				list: [],
				timePickerVisible: false,
				disabled: false,
				checkResult: '',
				data: {},
				insflowid: ''
			}
		},
		onLoad(options) {
			let that = this;
			if(options.datetime) {
				 this.time = options.datetime;
				 this.datetime = options.datetime;
			}
			if(options.data) {
				this.data = JSON.parse(options.data)
				this.insflowid = options.insflowid;
				this.datetime = this.data.AttendTime
				this.time = this.data.AttendTime
				this.content = this.data.Reason
			}
		},
		computed: {
			brief() {
				return '补卡时间：' + this.datetime + '|' + '补卡理由：' + this.content
			},
			checkBukaFiled() {
				return this.datetime && this.content ? true : false
			}
		},
		methods: {
			show() {
				this.time = this.time ? moment(this.time).format('YYYY-MM-DD HH:mm:ss') : moment().format('YYYY-MM-DD HH:mm') + ':00'
				this.datetime = this.time;
				this.$refs.datePicker.show()
			},
			confirmDateTime(e) {
				this.datetime = moment(e).format('YYYY-MM-DD HH:mm:ss')
			},
			/**
			 * 添加补卡申请
			 */
			addAttendApply(apiparam) {
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'addAttendApply',
						code: 3,
						apiparam,
						success(res) {
							uni.showToast({
								title: '流程创建成功',
								icon: 'none'
							})
							resolve()
						}
					})
				})
			},
			/**
			 * 触发流程环节通知
			 */
			trigFlowStepNotice(apiparam) {
				let that = this;
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'trigFlowStepNotice',
						code: 2,
						apiparam,
						success() {
							
						}
					})
				})
			},
			/**
			 * 点击提交按钮申请流程后的回调
			 * @param {Object} v 回调参数
			 */
			confirm(v) {
				this.addAttendApply({
					obsusername: this.obsusername,
					insflowid: v.insflowid,
					attendtime: this.datetime,
					reason: this.content
				}).then(() => {
					this.trigFlowStepNotice({
						insflowid: v.insflowid,
					})
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/home/child/add-attend/index?data=' + JSON.stringify(v)
						})
					},500)
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		overflow-x: hidden;
		padding-bottom: 180rpx;
		
		&__list {
			background-color: #fff;
			padding: 20rpx 10rpx;
			margin-top: 30rpx;
			
			&--text {
				
				&-symbol {
					color: red;
					margin: 0 5rpx;
				}
				
				&-des {
					font-size: 30rpx;
				}
				
			}
			
			&--time {
				font-size: 32rpx;
				color: #aaa;
				margin-left: 20rpx;
				position: relative;
				
				&-text {
					padding-left: 20rpx;
					height: 60rpx;
					z-index: 99;
					background-color: #fff;
				}
			}
			
			&--textarea {
				margin-left: 20rpx;
				font-size: 32rpx;
			}
		}
		
	}
	
	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		box-sizing: border-box;
	}
</style>
